import React from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts-wordcloud';
import wordCloudBg from '@/utils/wordCloudBg';
let myChart;

class Wordcloud extends React.Component {
  componentWillMount() {
    window.addEventListener('resize', function () {
      myChart.resize();
    });
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this)
    }
  }

  renderCharts = (cloudData) => {
    const data = {
      value: cloudData,
      image: wordCloudBg,
    };
    myChart = echarts.init(document.getElementById('wordCloud'));
    const maskImage = new Image();
    maskImage.src = data.image
    maskImage.onload = function () {
      myChart.setOption({
        backgroundColor: '#fff',
        tooltip: {
          show: false
        },
        series: [{
          type: 'wordCloud',
          gridSize: 1,
          sizeRange: [12, 32],
          rotationRange: [0, 0],
          maskImage: maskImage,
          textStyle: {
            normal: {
              color: function () {
                return 'rgb(' +
                  Math.round(Math.random() * 200) +
                  ', ' + Math.round(Math.random() * 200) +
                  ', ' + Math.round(Math.random() * 200) + ')'
              }
            }
          },
          left: 'center',
          top: 'center',
          // width: '96%',
          // height: '100%',
          right: null,
          bottom: null,
          // width: 300,
          // height: 200,
          // top: 20,
          data: data.value
        }]
      })
    }
  };

  render() {

    return (
      <div>
        <div id="wordCloud" style={{ height: 350 }}></div>
      </div>
    );
  }
}

export default Wordcloud;
